<script setup lang="ts">
import { ref } from 'vue';
import { ipcApiRoute } from '@/service/ee';
import { ipc } from '@/utils/ipc';

defineOptions({
  name: 'MinimaxCloseToolbar'
});
const isMaximized = ref(false);

function isMaximizedWindow() {
  return ipc.invoke(ipcApiRoute.isMaximizedWindow);
}

isMaximized.value = isMaximizedWindow();

function close() {
  ipc.invoke(ipcApiRoute.closeWindow);
}

function minimize() {
  ipc.invoke(ipcApiRoute.minimizeWindow);
}

function maximize() {
  ipc.invoke(ipcApiRoute.maximizeWindow);
  isMaximized.value = !isMaximized.value;
}

</script>

<template>
  <div class="flex-y-center justify-end">
    <ButtonIcon key="minimize" tooltip-content="" tooltip-placement="bottom-start" :z-index="99" @click="minimize">
      <SvgIcon icon="fluent:minimize-12-filled" />
    </ButtonIcon>
    <ButtonIcon
      v-if="!isMaximized"
      key="maximize"
      tooltip-content=""
      tooltip-placement="bottom-start"
      :z-index="99"
      @click="maximize"
    >
      <SvgIcon icon="fluent:full-screen-maximize-32-filled" />
    </ButtonIcon>
    <ButtonIcon
      v-if="isMaximized"
      key="maximize-2"
      tooltip-content=""
      tooltip-placement="bottom-start"
      :z-index="99"
      @click="maximize"
    >
      <SvgIcon icon="fluent:full-screen-minimize-32-filled" />
    </ButtonIcon>
    <ButtonIcon key="close" tooltip-content="" tooltip-placement="bottom-start" :z-index="99" @click="close">
      <SvgIcon icon="iconamoon:close-duotone" />
    </ButtonIcon>
  </div>
</template>

<style scoped></style>
